<template>
	<view class="info">

		<view class="top_it">
			<view style="width: 120rpx;height: 120rpx;border-radius: 100%;">
				<image class="circleImg" src="@/static/img/peo2.png"></image>
			</view>
			<view class="t_name">{{enterprise.name}}</view>
		</view>


		<view class="carousel">
			<swiper indicator-dots circular=true duration="400">
				<swiper-item class="swiper-item">
					<view class="image-wrapper" v-if="position!=''">
						<image :src="'https://guanli.rgzx.site/assets/uploadimage/'+position.pcPicture"></image>
					</view>
					<view class="image-wrapper" v-else>
						<image src="@/static/img/index/index_image01.png"></image>
					</view>
				</swiper-item>
				<!-- <swiper-item class="swiper-item">
					<view class="image-wrapper">
						<image src="@/static/img/index/index_image01.png"></image>
					</view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<view class="image-wrapper">
						<image src="@/static/img/index/index_image01.png"></image>
					</view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<view class="image-wrapper">
						<image src="@/static/img/index/index_image01.png"></image>
					</view> -->
				</swiper-item>
			</swiper>
		</view>

		<view class="item">
			<view class="title">{{position.pcName}}</view>
			<view class="smallT" style="margin-top: 10rpx;">{{position.introduction}}</view>
		</view>


		<view class="item">
			<view class="title_item">
				<view class="title">岗位</view>
				<view class="smallT">(剩余人数/所需总人数)</view>
			</view>
			<view>
				<view class="gw" v-for="(item,index) in quota" :key="index">
					<view class="gw_item">
						<view class="gw_item_blod">{{item.pName}}</view>
						<view class="gw_item_blue">{{item.current}}</view>
						<view>/</view>
						<view class="gw_item_blod">{{item.total}}</view>
						<view style="margin-right: 13rpx;"></view>
					</view>
					<!-- <view class="gw_item">
					<view>前端</view>
					<view class="gw_item_blue">2</view>
					<view>/</view>
					<view class="gw_item_blod">4</view>
				</view>
				<view class="gw_item">
					<view>后端</view>
					<view class="gw_item_blue">2</view>
					<view>/</view>
					<view class="gw_item_blod">4</view>
				</view>
				<view class="gw_item">
					<view>UI</view>
					<view class="gw_item_blue">2</view>
					<view>/</view>
					<view class="gw_item_blod">4</view>
				</view> -->
				</view>
			</view>
		</view>


		<view class="item">
			<view class="title_item">
				<view class="title">咨询</view>
				<view class="smallT">(需自行联系咨询相关情况)</view>
			</view>
			<view class="gw_item_zx">
				<image class="ico" src="@/static/img/qq.png"></image>
				<view>联系</view>
				<text>{{enterprise.linkTel}}</text>
			</view>
			<view class="gw_item_zx">
				<image class="ico" src="@/static/img/email.png"></image>
				<view>邮箱</view>
				<text>{{enterprise.email}}</text>
			</view>

		</view>

		<view class="item">
			<view class="title">报名期间</view>
			<view class="smallT gw_item_zx">
				<view>2020-02-20</view>
				<view>至</view>
				<view>2020-04-06</view>
			</view>
		</view>


		<uni-popup ref="popupBM" type="dialog">
			<!-- title="通知1" -->
			<uni-popup-dialog type="success" :content="message" :before-close="true" @confirm="dialogConfirm" @close="dialogClose">
			</uni-popup-dialog>
		</uni-popup>

		<uni-popup ref="popupMessage" type="dialog">
			<!-- title="通知2" -->
			<uni-popup-dialog type="success" :content="message" :before-close="true" @confirm="dialogConfirm1" @close="dialogClose1">
			</uni-popup-dialog>
		</uni-popup>


		<view v-if="role=='student'">
			<view>
				<view class="bgc"></view>
				<view class="title">可选岗位</view>
				<view class="mg">
					<cl-radio-group v-model="bmPcId">
						<cl-radio v-for="(item,index) in quota" :label="item.pId" :key="index">{{item.pName}}</cl-radio>
					</cl-radio-group>
				</view>

				<view class="bgc2">
					<view class="bgc3">
						<view class="text" @click="CheApply">报名</view>
					</view>
				</view>
			</view>
			<view>

			</view>
		</view>
	</view>

</template>

<script>
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	import uniPopupShare from '@/components/uni-popup/uni-popup-share.vue'

	import {
		// getTest,
		getProclassById,
		apply
	} from '@/api/index/service.js';
	export default {

		components: {
			uniPopupMessage,
			uniPopupDialog,
			uniPopupShare
		},

		data() {
			return {
				enterprise: 22,
				quota: [],
				position: '',

				Stuid: -1,
				role: '',
				//PcId
				id: 0,
				//PId
				bmPcId: 0,
				message: 'hello',

			}
		},
		props: {
			// enterprise:Object,
			// quota:Array,
			// position:Object,


		},


		onLoad(options) {
			//options可以接到context 传过来的值
			console.log(options)
			this.id = options.key;
			this.loadData(this.id);

			this.role = uni.getStorageSync("role");
			// console.log(this.role)

			if (this.role == 'student')
				this.Stuid = uni.getStorageSync("Stuid");

			console.log(this.role);
			console.log(this.Stuid);


		},

		created() {

			console.log('created');
		},

		methods: {
			loadData(id) {
				//获取详情数据
				getProclassById(id)
					.then(res => {
						this.enterprise = res.data.enterprise;
						this.quota = res.data.quota;
						this.position = res.data.position;

						console.log(res.data)
						// console.log(res.data.enterprise)
					}).catch(res => {
						console.log(res)
					})
			},

			radioChange() {
				console.log(this.bmPcId)
			},
			CheApply() {
				if (this.bmPcId == 0) {
					console.log("未选中", this.bmPcId)
				} else {
					console.log("点击", this.bmPcId)
					console.log(parseInt(this.Stuid), parseInt(this.bmPcId), parseInt(this.id))
					this.message = "是否确定报名该项目班岗位?";
					// this.message = "是否确定报名该项目班"+this.quota[]+"岗位";
					this.$refs.popupBM.open();
				}
			},
			GoApply(stuId, pId, pcId) {
				console.log(stuId, pId, pcId)
				apply(stuId, pId, pcId)
					.then(res => {
						this.message = res.data.msg;
						console.log(this.message);
						console.log(res);
						//打开弹窗
						this.$refs.popupMessage.open();
					}).catch(res => {
						console.log(res)
					});


			},
			dialogConfirm(done) {
				console.log('点击确认');
				this.GoApply(parseInt(this.Stuid), parseInt(this.bmPcId), parseInt(this.id))
				// 需要执行 done 才能关闭对话框
				done()
			},
			dialogClose(done) {
				console.log('点击取消');
				// 需要执行 done 才能关闭对话框
				done()
			},
			dialogConfirm1(done) {
				console.log('点击确认');
				// 需要执行 done 才能关闭对话框
				done()
			},
			dialogClose1(done) {
				console.log('点击取消');
				// 需要执行 done 才能关闭对话框
				done()
			}
		},
	}
</script>

<style>
	.info {
		margin: 30rpx;
	}

	.top_it {
		padding: 0;
		/* position: relative; */
		/* margin: 0 auto; */
		display: flex;
		align-items: center;
		align-content: center;

	}

	.t_name {
		size: 28rpx;
		/* display: block; */
		width: 100%;
		align-content: center;
		margin-left: 20rpx;
		font-style: normal;
	}

	.circleImg {
		/* border-radius: 100%; */
		width: 120rpx;
		height: 120rpx;
	}

	.carousel {
		margin-top: 20rpx;
		height: 328upx;
		/* position: relative; */
	}

	.carousel swiper {
		height: 100%;
	}

	.image-wrapper {
		width: 100%;
		height: 100%;
	}

	.swiper-item {
		/* display: flex; */
		justify-content: center;
		align-content: center;
		height: 750upx;
		overflow: hidden;
	}

	.swiper-item image {
		width: 100%;
		height: 100%;
	}

	.gw {
		display: inline-block;
		/* align-items: center; */
	}

	.gw_item {
		margin: 20rpx 20rpx 10rpx 0rpx;
		font-size: 32rpx;
		display: flex;
		flex: 1;

	}

	.gw_item_zx {
		margin: 20rpx 20rpx 10rpx 0rpx;
		font-size: 32rpx;
		display: flex;
		align-items: center;
		opacity: 0.8;
		flex: 1;
	}

	.gw_item_zx view {
		margin-left: 14rpx;
	}

	.gw_item_blod {
		font-weight: 700;
		opacity: 0.6;
	}

	.gw_item_blue {
		font-weight: 700;
		color: #357DC5;
	}

	.item {
		margin: 50rpx 5rpx;
	}

	.title_item {

		display: flex;
		/* position: fixed; */
		align-items: flex-end;
	}

	.title {
		/* font-weight: 7; */
		color: #000000;
		font-size: 32rpx;
		font-weight: 700;
		opacity: 0.9;
	}

	.title2 {
		/* font-weight: 7; */
		color: rgba(78, 78, 78, 1);
		font-size: 28rpx;
		font-weight: 700;
		/* opacity: 0.9; */
	}

	.smallT {
		font-size: 30rpx;
		vertical-align: bottom;
		margin-left: 20rpx;
		color: #4E4E4E;
		opacity: 0.8;

	}

	.ico {
		width: 30rpx;
		height: 35rpx;
	}

	.bgc {
		height: 26rpx;
		background-color: rgba(255, 255, 255, 1);
	}

	.mg {
		margin-top: 20rpx;
		margin-bottom: 15rpx;
	}

	.bgc2 {

		background-color: rgba(255, 255, 255, 1);
		height: 160rpx;
		align-items: center;
		display: flex;
		padding: 10rpx;
	}

	.bgc2 .bgc3 {
		background-color: rgba(53, 125, 197, 1);
		align-items: center;
		height: 88rpx;
		flex: 1;
		display: flex;
		justify-content: center;
		vertical-align: center);
	}

	.bgc2 .text {
		text-align: center;
		color: rgba(255, 255, 255, 1);
		margin: 0 auto;
		flex: 1;
		justify-content: center;
		vertical-align: center);
	}
</style>
